<template>
  <view class="pages">
    <h-nav-bar title="绑定支付宝" :fixed="true" backgroundColor="#FFFFFF" @clickRight="clickManage">
      <template #right>
        <up-icon name="more-dot-fill" color="#333333" size="24"></up-icon>
      </template>
    </h-nav-bar>
    <view class="bind_box" v-if="!isBinding">
      <view class="bind_title">
        <text>*绑定支付宝账号</text>
      </view>
      <view class="name_box">
        <text style="width: 150rpx">姓名</text>
        <view style="display: flex; align-items: center">
          <up-input v-model="submitPreams.ali_realname" placeholder="请输入真实姓名" border="none"
            :placeholderStyle="{ 'text-align': 'right' }" clearable type="text" inputAlign="right"
            fontSize="28rpx"></up-input>
          <up-icon name="arrow-right" color="#999999" size="18"></up-icon>
        </view>
      </view>
      <view class="account_box">
        <text style="width: 150rpx">支付宝账号</text>
        <view style="display: flex; align-items: center">
          <up-input v-model="submitPreams.ali_account" placeholder="请输入支付宝账号" border="none"
            :placeholderStyle="{ 'text-align': 'right' }" clearable type="text" inputAlign="right"
            fontSize="28rpx"></up-input>
          <up-icon name="arrow-right" color="#999999" size="18"></up-icon>
        </view>
      </view>
      <view class="ok_btn" @click="verify">确认绑定</view>
    </view>
    <view v-else class="bind_box">
      <view class="bind_title">
        <text>*绑定支付宝账号</text>
      </view>
      <view class="name_box">
        <text style="width: 150rpx">姓名</text>
        <view style="display: flex; align-items: center">{{ aliInfo?.ali_realname }}</view>
      </view>
      <view class="account_box" style="border: none">
        <text style="width: 150rpx">支付宝账号</text>
        <view style="display: flex; align-items: center">{{ aliInfo?.ali_account }}</view>
      </view>
    </view>
  </view>
  <u-popup :show="showRelieve" :round="10" mode="bottom" @close="showRelieve = false">
    <view class="relice_box">
      <view class="relice_info">解除绑定后将无法发起提现</view>
      <view class="relice_bind" @click="reliceBind">解除绑定</view>
      <view class="relice_line"></view>
      <view class="relice_cancel" @click="showRelieve = false">取消</view>
    </view>
  </u-popup>
  <!-- 解绑提示 -->
  <h-modal :show="bindShow" titlea="是否确认解除绑定" leftBtn="取消" rightBtn="确定" btnColor="#FFB300" @clear="clearEdit"
    @bind="saveEditFn"></h-modal>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad, onReachBottom, onPageScroll, onShow } from '@dcloudio/uni-app'
import { showToast, redirectTo, navigateTo, navigateBack, phoneDesensitization } from '@/utils'
import { bindAlipayApi, getBoundInfoApi, unbindAlipayApi } from '@/api/patients/index'
//是否绑定
const isBinding = ref(false)
const submitPreams = ref({
  ali_realname: '',
  ali_account: '',
})
//解除绑定弹窗
const showRelieve = ref(false)
const bindShow = ref(false)
var props = defineProps({
  isBinding:Number
})
onLoad((o) => {
})
onShow(()=>{
  // getWalletList()
  getBoundInfo()
})
// async function getWalletList() {
//   const res = await getWalletListApi()
//   if (res?.code == 200) {
//     if(res?.data?.alipayList?.isBind == 0){
//       isBinding.value = false
//       submitPreams.value.ali_realname = ''
//       submitPreams.value.ali_account = ''
//     }else{
//       isBinding.value = true
//       getBoundInfo()
//     }
//   }
// }
//获取支付宝性息
const aliInfo = ref({})
async function getBoundInfo() {
  const res = await getBoundInfoApi()
  if (res?.code == 200) {
    if(res?.data?.ali_account == ''){
      isBinding.value = false
      submitPreams.value.ali_realname = ''
      submitPreams.value.ali_account = ''
    }else{
      isBinding.value = true
      aliInfo.value = res?.data
    }

  }
}
//确定
function verify() {
  if (!submitPreams.value.ali_realname) {
    showToast("请输入姓名")
  } else if (!submitPreams.value.ali_account) {
    showToast("请输入支付宝账号")
  } else {
    bindAlipayApi(submitPreams.value).then((res) => {
      if (res?.code == 200) {
        showToast("绑定成功")
        isBinding.value = true
        getBoundInfo()
      } else {
        showToast(res.msg)
        isBinding.value = false
      }
    })
  }
}
function clickManage() {
  if (isBinding.value) {
    showRelieve.value = true
  } else {
    showToast('您未绑定账户')
  }
}
//解除绑定
function reliceBind() {
  showRelieve.value = false
  bindShow.value = true
}
function clearEdit() {
  bindShow.value = false
}
//确认解除
function saveEditFn() {
  bindShow.value = false
  unbindAlipayApi().then((res) => {
    if (res?.code == 200) {
      showToast("已解除绑定")
      isBinding.value = false
    } else {
      showToast(res.msg)
    }
  })
  // navigateTo('/pages-user/pay/relieve-bind')
}
</script>
<style scoped lang="scss">
.pages {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 30rpx;
  display: flex;
  background: #F6F6F6;
  font-family: PingFang-SC-Bold, PingFang-SC;
  flex-direction: column;
  align-items: center;

  .bind_box {
    width: 709rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx 24rpx 0 24rpx;
    margin-top: 20rpx;

    .bind_title {
      width: 669rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #999999;
    }

    .name_box {
      width: 662rpx;
      height: 110rpx;
      border-bottom: 1rpx solid #F6F6F6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }

    .account_box {
      width: 662rpx;
      height: 110rpx;
      border-bottom: 1rpx solid #F6F6F6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .ok_btn {
    width: 400rpx;
    height: 88rpx;
    background: #00C1B9;
    border-radius: 44rpx;
    margin: 80rpx auto;
    font-weight: 500;
    font-size: 34rpx;
    color: #f6f6f6;
    text-align: center;
    line-height: 91rpx;
  }
}

.relice_box {
  .relice_info {
    width: 750rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 26rpx;
    color: #999999;
    border-bottom: 1rpx solid #F6F6F6;
  }

  .relice_bind {
    width: 750rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 30rpx;
    color: #333333;
  }

  .relice_line {
    width: 750rpx;
    height: 10rpx;
    background: #F6F6F6;
  }

  .relice_cancel {
    width: 750rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 26rpx;
    color: #999999;
  }
}
</style>
